//参赛队伍攻击记录列表面板
import { Col, Row, Card, Descriptions, List, Tag, Typography } from 'antd';
const { Paragraph } = Typography;
import { useState, useEffect } from 'react';
import { queryTeamAttackRecordList } from "@/services/attackRecord"
import styles from './index.less';
const TeamAttackRecordPanel = ({ competitionUnCode, competitionStatus }) => {
    const [teamAttackRecordList, setTeamAttackRecordList] = useState([])
    useEffect(() => {
        if (competitionUnCode) {
            initAttackRecordList()
        }
    }, [competitionUnCode])
    const initAttackRecordList = async () => {
        //当赛事处于比赛中、结束或者暂停时才会获取参赛队伍攻击记录信息列表
        if (competitionStatus === 'IN_THE_COMP' || competitionStatus === 'END_THE_COMP' || competitionStatus === 'PAUSE') {
            let param = { compUnCode: competitionUnCode }
            const res = await queryTeamAttackRecordList(param)
            if (res.success) {
                setTeamAttackRecordList(res.data)
            }
        }
    }
    return (
        <>
            <Card>
                <List
                    header={
                        <div>
                            <Row>
                                <div>攻击记录列表</div>
                            </Row>
                            <Row justify="space-between">
                                <Col span={12}><div>受攻击队伍名称</div></Col>
                                <Col span={12} style={{ textAlign: 'right' }}>攻击手</Col>
                            </Row>
                        </div>
                    }
                    className={styles.container}
                    bordered
                    dataSource={teamAttackRecordList}
                    renderItem={(item) => (
                        <List.Item>
                            <div>{item?.teamUnderAttackName}</div>
                            <div>{item?.attackerName}</div>
                        </List.Item>
                    )}
                />
            </Card>
        </>
    )
}
export default TeamAttackRecordPanel